<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Leon</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .media {
            width: 800px;
            height: 50px;
            border: 3px solid #bbb;
            margin: 300px auto;
        }

        .media>div {
            float: left;
            line-height: 50px;
            margin: 0 10px;
        }

        .media>div.playRange {
            width: 200px;
            height: 6px;
            background-color: #333;
            margin: 22px 10px;
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }

        .media>div.playRange .currentRange {
            /* width: 100px; */
            width: 0px;
            height: 6px;
            background-color: rgb(9, 143, 153);
            position: absolute;
            left: 0;
            top: 0;
            /* pointer-events: none; */
        }

        .media>div.playRange .playBtn {
            width: 20px;
            height: 20px;
            background-color: rgb(9, 143, 153);
            border-radius: 50%;
            position: absolute;
            /* left: 90px; */
            left: 0px;
            top: -7px;
            /* 设置元素的鼠标事件穿透 */
            pointer-events: none;
        }

        .media .volume {
            position: relative;
        }

        .media .volumeRange {
            width: 4px;
            height: 100px;
            background-color: #333;
            border-radius: 2px;
            position: absolute;
            top: -100px;
            left: 10px;
            display: none;
            cursor: pointer;
        }

        .media .volumeRange .currentVolume {
            width: 4px;
            height: 50px;
            background-color: blue;
            border-radius: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
            pointer-events: none;
        }

        .media .volumeRange .volumeBtn {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            left: -5px;
            bottom: 40px;
            pointer-events: none;
        }

        .media i {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <audio src="./陈奕迅-孤勇者.mp3"></audio>
    <!-- 多媒体空间 -->
    <div class="media">
        <!-- 播放暂停按钮 -->
        <div class="playOrPause">
            <i class="iconfont icon-play"></i>
        </div>
        <!-- 播放事件 -->
        <div class="time">
            <span class="currentMinute">00</span>
            :
            <span class="currentSecond">00</span>
            /
            <span class="durationMinute">00</span>
            :
            <span class="durationSecond">00</span>
        </div>
        <!-- 播放进度条 -->
        <div class="playRange">
            <div class="currentRange"></div>
            <div class="playBtn"></div>
        </div>
        <!-- 声音控件 -->
        <div class="volume">
            <!-- 声音大小控制 -->
            <div class="volumeRange">
                <div class="currentVolume"></div>
                <div class="volumeBtn"></div>
            </div>
            <!-- 声音按钮 -->
            <i class="iconfont icon-sound-on"></i>
        </div>
    </div>
</body>

</html>
<script src="./jquery.js"></script>
<script>
    // 定义一个存储音频dom元素的变量
    let mide = $('audio')[0];

    $('.playOrPause i').click(function (e) {
        if ($(e.target).hasClass('icon-play')) {
            $(this).removeClass('icon-play').addClass('icon-pause');
            mide.play();
        } else {
            $(this).removeClass('icon-pause').addClass('icon-play');
            mide.pause();
        }

    })
    // 渲染总时长
    mide.oncanplay = function () {
        let m = parseInt(this.duration / 60);
        let s = parseInt(this.duration % 60);
        $('.durationMinute').text(m < 10 ? '0' + m : m);
        $('.durationSecond').text(s < 10 ? '0' + s : s);
    }
    // 添加播放改变事件
    mide.ontimeupdate = function () {
        let m = parseInt(this.currentTime / 60);
        let s = parseInt(this.currentTime % 60);
        $('.currentMinute').text(m < 10 ? '0' + m : m);
        $('.currentSecond').text(s < 10 ? '0' + s : s);
        // 当前长度/总长度 === 当前播放时间/总播放时间
        let len = parseInt($('.playRange').width() * (this.currentTime / this.duration));
        $('.currentRange').css('width', len);
        $('.playBtn').css('left', len - $('.playBtn').width() / 2);
    }
    // 添加播放结束事件
    mide.onended = function () {
        $('.playOrPause i').removeClass('icon-pause').addClass('icon-play');
    }

    // 添加进度条拖拽事件
    $('.playRange')[0].onmousedown = function (e) {
        let x = e.offsetX;
        $('.currentRange').css('width', x);
        $('.playBtn').css('left', x - $('.playBtn').width() / 2);
        if ($('.playOrPause i').hasClass('icon-play')) {
            $('.playOrPause i').removeClass('icon-play').addClass('icon-pause');
            mide.play();
        }

        $('.playRange')[0].onmousemove = function (e) {
            let x = e.offsetX;
            $('.currentRange').css('width', x);
            $('.playBtn').css('left', x - $('.playBtn').width() / 2);
            mide.currentTime = (x / $(this).width()) * mide.duration
        }
    }
    // 添加移入移出事件
    $('.volume').hover(function(){
        $('.volumeRange').show();
    },function(){
        $('.volumeRange').hide();
    })
    // 添加静音点击事件
    $('.volume i').click(function (e) {
        if ($(e.target).hasClass('icon-sound-on')) {
            $(this).removeClass('icon-sound-on').addClass('icon-sound-off');
            mide.muted = true;
            $('.currentVolume').css('height', 0)
            $('.volumeBtn').css('bottom', -7)
        } else {
            $(this).removeClass('icon-sound-off').addClass('icon-sound-on');
            mide.muted = false;
            $('.currentVolume').css('height', 50)
            $('.volumeBtn').css('bottom', 43)
            mide.volume = 0.5
        }
    })

    // 给音量添加拖拽事件
    $('.volumeRange')[0].onmousedown = function (e) {
        let y = e.offsetY;
        $('.currentVolume').css('height', $(this).height()-y);
        $('.volumeBtn').css('bottom', ($(this).height()-y) - $('.volumeBtn').height() / 2);


        $('.volumeRange')[0].onmousemove = function (e) {
            let y = e.offsetY;
            $('.currentVolume').css('height', $(this).height()-y);
            $('.volumeBtn').css('bottom', ($(this).height()-y) - $('.volumeBtn').height() / 2);
            mide.volume = (($(this).height()-y) / $(this).height())
        }
    }
    document.onmouseup = function () {
        $('.playRange')[0].onmousemove = null;
        $('.volumeRange')[0].onmousemove = null;
    }
    document.onselectstart = function (e) {
        e.preventDefault();
    }
</script>